<template>
  <img :src="srcUrl" @click="open()" />
</template>

<script>
    export default {
      name: 'previewImg',
      props: ['srcUrl'],
      methods: {
        open() {
          const _this = this;
          let src = 'background-image: url(' + _this.srcUrl + ')';
          _this.$alert((function (){
              return <div class="ymy-img" style={src}></div>
          })(), {
            title: '预览',
            customClass: 'ymy-img-wrap',
            showCancelButton: false,
            showConfirmButton: false,
            callback: action => {

            }
          });
        }
      }
    }
</script>

<style lang="scss">
  .ymy-img-wrap{
    width: 800px!important;
    height: 500px!important;
    .ymy-img{
      width: 100%;
      height: 100%;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
    }
    .el-message-box__message{
      height: 402px;
    }
  }
</style>
